<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 引入layui的样式 -->
    <link href="//unpkg.com/layui@2.9.16/dist/css/layui.css" rel="stylesheet">
    <style>
        .bottom {
            background-color: #ececec;
            text-align: center;
            height: 40px;
            line-height: 40px;
            position: fixed;
            bottom: 0px;
            width: 100%;
        }

        .con {
            background-color: #e60012;
        }

        .top .tit {
            padding: 15px;
            border-radius: 20px 20px 0px 0px;
            background-color: aliceblue;
            margin-top: 10px;
            border-bottom: 1px solid #e2e2e2;
        }

        .top .tit p {
            margin-top: 5px;
        }

        .tit p {
            color: #666;
            font-size: 12px;
        }

        .middle {
            background-color: #FFF;
        }

        .slogen {
            line-height: 20px;
            color: yellow;
            font-weight: 600;
            padding-left: 30px;
            padding-top: 20px;
        }

        .middle {
        }

        .middle ul li {
            margin-bottom: 20px;
            text-align: center;
            font-weight: 500;
        }

        .types {
            background-color: #f5f5f5;
            padding: 15px;
        }

        .pros img {
            width: 100%;
        }

        .pros {
            padding-left: 10px;
        }

        .priceRed {
            color: red;
        }

        .price {
            font-size: 18px;
        }

        .oldPrice {
            text-decoration: line-through;
        }

        .jiahao {
            position: absolute;
            right: 30px;
            color: yellow;
            font-family: "黑体";
            font-weight: 900;
            font-size: 20px;
            background: red;
            border-radius: 20px;
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
        }

        .fuBiaoTi {
            font-size: 12px;
            color: #999;
            padding-top: 2px;
            margin-bottom: 10px;
        }

        .proItem {
            margin-top: 20px;
            position: relative;
        }

        #shopName {
            font-weight: 900;
            font-size: 16px;
        }

        .proItem .layui-col-xs8 {
            padding-left: 5px;
        }

        .cart {
            height: 40px;
            background: #544747;
            width: 90%;
            position: fixed;
            bottom: 40px;
            border-radius: 20px;
            opacity: 0.95;
            color: white;
            line-height: 40px;
            margin: 0px 20px;
        }

        .cart button {
            position: absolute;
            right: 0px;
            height: 40px;
        }

        .layui-icon-cart {
            margin-left: 80px;
        }

        #oldTotalPrice {
            text-decoration: line-through;
        }

        #totalNum {
            position: relative;
            top: -15px;
            left: -5px;
            border-radius: 10px;
        }

        #totalPrice {
            font-size: 20px;
        }
        #carts img {
            width: 100%;
        }

        #carts .layui-col-xs10 {
            padding-left: 10px;
        }

        .jian {
            position: absolute;
            right: 90px;
            color: #544747;
            font-family: "黑体";
            font-weight: 900;
            font-size: 20px;
            background: #e2e2e2;
            border-radius: 20px;
            display: inline-block;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            cursor: pointer;
        }

        .proNum {
            position: absolute;
            right: 70px;
        }
        #pros{
            padding-bottom: 82px;
        }
    </style>
</head>
<body>
<div class="con">
    <p class="slogen">就爱这块 正新鸡排</p>
    <div class="top">
        <div class="layui-row  tit">
            <div class="layui-col-xs8 ">
                <p id="shopName">正新鸡排（郑州瀚海店）</p>
                <p>距离1.5km | 河南省郑州市金水区</p>
            </div>
            <div class="layui-col-xs4 ">
                <form class="layui-form" action="">
                    <select name="interest" lay-filter="aihao" id="desks">
                        <option value="">请选择桌号</option>
                    </select>
                </form>
            </div>
        </div>
    </div>
    <div class="layui-row middle">
        <!-- 左侧分类列表 -->
        <div class="layui-col-xs3 types">
            <ul id="typeList">

            </ul>
        </div>
        <!-- 右侧菜品列表 -->
        <div class="layui-col-xs9 pros" id="pros">

        </div>
    </div>
</div>
<!-- 购物车 -->
<div class="layui-row cart" onclick="openCart()">
    <div class="layui-col-xs12">
        <div class="grid-demo grid-demo-bg1">
            <i class="layui-icon layui-icon-cart" style="font-size: 30px; color: #e60012;"></i>
            <span class="layui-badge" id="totalNum">0</span>
            ￥<span id="totalPrice">0.00</span>
            <span id="oldTotalPrice">￥0.00</span>
            <button type="button" class="layui-btn layui-btn-danger layui-btn-radius" id="toOrder">去结算</button>
        </div>
    </div>
</div>
<!-- 底部菜单 -->
<div class="layui-row bottom">
    <div class="layui-col-xs6">
        <div class="grid-demo grid-demo-bg1">
            <i class="layui-icon layui-icon-survey" style="font-size: 30px; color: #e60012;"></i>
            点餐
        </div>
    </div>
    <div class="layui-col-xs6">
        <div class="grid-demo">
            <i class="layui-icon layui-icon-user" style="font-size: 30px; color: #e60012;"></i>
            <a href="orders.html"> 订单</a>
        </div>
    </div>
</div>

<!-- 购物车清单 -->
<div style="padding: 16px; display: none;" id="carts">

</div>


<!-- 引入layui的脚本-->
<script src="//unpkg.com/layui@2.9.16/dist/layui.js"></script>
<script>
    layui.use(function () {
        var $ = layui.$;
        var form = layui.form;

        var cartList = {}
        //自定义函数：展示购物车清单
        window.openCart = function() {
            var deskId = $("#desks").val();
            var total = $("#totalPrice").html().trim();
            if (deskId) {
                //弹窗
                layer.open({
                    type: 1,
                    offset: 'auto',
                    anim: 'slideUp', // 从下往上
                    area: ['100%', '60%'],
                    shade: 0.1,
                    shadeClose: true,
                    title: "购物车清单",
                    id: 'ID-demo-layer-direction-b',
                    content: $("#carts"),
                    btn: ['下单'],
                    btn1: function() {
                        //alert("哈哈哈")
                        if(total==0){
                            layer.msg("请选购菜品");
                            layer.close("ID-demo-layer-direction-b")
                            return;
                        }
                        //向服务端发1个请求，结算
                        $.post("/ordered/submit",{deskId:deskId},function(res){
                            layer.close('ID-demo-layer-direction-b');
                            //查询购物车
                            getCart(deskId);
                        },"json")
                        // if (total == 0) {
                        //     layer.msg("先选菜品吧",{time:1000},function(){
                        //         layer.close('ID-demo-layer-direction-b');
                        //     })
                        // }
                        // //1.向订单表中插入
                        // $.post("/ordered/add", {
                        //     did: deskId,
                        //     total: total
                        // }, function(res) {
                        //     //2.向订单明细表中批量插入
                        //     for (var item of cartList) {
                        //         $.post("/order-detail/add", {
                        //                 orderId: res.data.id,
                        //                 proName: item.pname, //冒号左边是订单明细实体属性名，冒号右边是购物车列表属性名
                        //                 proImg: item.proimg,
                        //                 proPrice: item.price,
                        //                 num: item.num
                        //             },
                        //             function(res) {
                        //                 layer.msg(res.msg)
                        //             }, "json")
                        //     }
                        // }, "json")
                        // //3.删除当前桌的购物车
                        // $.post("/cart/del", {
                        //     deskId: deskId
                        // }, function(res) {
                        //     console.log(res);
                        //     layer.close('ID-demo-layer-direction-b');
                        //     //查询购物车
                        //     getCart(deskId);
                        // }, "json")
                    }
                });
            } else {
                layer.msg("请先选择桌号")
            }
        }




        //下拉框的选择事件
        form.on('select', function(data){
            //查询购物车
            getCart(data.value);
        });



        //自定义函数：查询购物车
        window.getCart = function(deskId) {
            if (deskId) {
                //计算和展示金额
                $.get("/cart/getList", {
                    deskId: deskId
                }, function(res) {
                    if (res.code == 200) {
                        cartList = res.data;
                        var totalNum = 0;
                        var totalPrice = 0;
                        var oldTotalPrice = 0;
                        $("#carts").html("");
                        for (var item of res.data) {
                            totalNum += item.num;
                            totalPrice += item.price * item.num;
                            oldTotalPrice += item.oldPrice * item.num;
                            var s = `
											<div class="layui-row ">
												<div class="layui-col-xs2">
													<img src="/showPic/${item.proimg}" alt="">
												</div>
												<div class="layui-col-xs10">
													<h4> ${item.pname} </h4>
													<p class="proBottom">
														<span class="priceRed">￥<span class="price">${item.price}</span></span>
														<span class="jian" onclick="addCart(${item.pid},-1)">-</span>
														<span class="proNum"> ${item.num} </span>
														<span class="jiahao" onclick="addCart(${item.pid},1)">+</span>
													</p>
												</div>
											</div>
											`;
                            $("#carts").append(s);
                        }
                        $("#totalNum").html(totalNum);
                        totalPrice=totalPrice.toFixed(2)
                        oldTotalPrice=oldTotalPrice.toFixed(2)
                        $("#totalPrice").html(totalPrice);
                        $("#oldTotalPrice").html(oldTotalPrice);
                    }
                }, "json");
            } else {
                layer.msg("请先选择桌号")
            }
        }


        //自定义函数:加购物车功能
            window.addCart = function (pid, num) {
                var deskId = $("#desks").val();
                if (deskId) {
                    //准备请求的参数
                    var param = {proId: pid, num: num, deskId: deskId}
                    //发请求
                    $.post("/cart/add", param, function (res) {
                        if (res.code == 200) {
                            layer.msg("成功", {time: 500})
                            //查询购物车信息
                            getCart(deskId)
                        } else {
                            layer.msg(res.msg)
                        }
                    }, "json")
                } else {
                    layer.msg("请选桌号")
                }
            }
    //发请求：获取所有的类型数据，展示在页面上
    $.get("/type/getAllList", function (res) {
        if (res.code == 200) {
            for (var item of res.data) {
                var s = `<li><a href="#"> ${item.tname} </a></li>`;
                $("#typeList").append(s);
            }
        }
    }, "json")

    //发请求：获取所有的类型数据，展示在页面上
    $.get("/product/getAllList", function (res) {
        if (res.code == 200) {
            for (var item of res.data) {
                var s = `<div class="layui-row proItem">
                <div class="layui-col-xs4">
                    <img src="/showPic/${item.proimg}" alt="">
                </div>
                <div class="layui-col-xs8">
                    <h4>${item.pname}</h4>
                    <p class="fuBiaoTi">${item.taste}</p>
                    <p class="proBottom">
                        <span class="priceRed">￥<span class="price">${item.price}</span></span>
                        <span class="oldPrice">${item.oldPrice}</span>
                        <span class="jiahao" onclick="addCart(${item.id},1)">+</span>
                    </p>
                </div>
            </div>`;
                $("#pros").append(s);
            }
        }
    }, "json")
    //向服务端发请求：获取所有餐桌，展示在页面上
    $.get("/desk/getAllList", function (res) {
        if (res.code == 200) {
            for (var item of res.data) {
                var s = `<option value="${item.id}">${item.dname}</option>`;
                $("#desks").append(s);
                form.render('select'); // 仅渲染 select 元素
            }
        }
    }, "json")
    })
</script>
</body>
</html>